<template>
  <div class="login">
    <vue-particles id="tsparticles" :particlesInit="particlesInit" :options="options" />
    <div class="login-modal">
      <div class="logo-header">
        <img v-if="logo" :src="logo" style="height: 40px" alt="" />
        <span>GEEK-CMS 系统</span>
      </div>
      <!-- 表单 -->
      <a-form
        :model="formState"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item name="username" :rules="[{ required: true, message: '账号不能为空！' }]">
          <a-input
            ref="usernameIntance"
            v-model:value="formState.username"
            size="large"
            placeholder="请输入账号"
          >
            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
        </a-form-item>

        <a-tooltip placement="topLeft" :open="isShowCaps">
          <template #title>
            <span>开启大小写</span>
          </template>
          <a-form-item
            name="password"
            :rules="[
              { required: true, message: '密码不能为空' },
              {
                min: 3,
                max: 8,
                message: '密码长度 3-8位'
              }
            ]"
          >
            <a-input
              v-model:value="formState.password"
              size="large"
              type="password"
              placeholder="请输入密码"
              @keydown="keydown"
              @blur="blur"
            >
              <template #prefix
                ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"></LockOutlined
              ></template>
            </a-input>
          </a-form-item>
        </a-tooltip>

        <a-form-item name="remember">
          <a-row>
            <a-col :span="8">
              <a-checkbox v-model:checked="formState.remember">
                <span style="color: #fff">记住密码</span>
              </a-checkbox>
            </a-col>
            <a-col :span="8" :offset="8">
              <p style="text-align: right; color: #fff">联系管理员</p>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" :loading="isSending" html-type="submit" block size="large"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script setup name="Login">
// eslint-disable-next-line no-unused-vars
const toLogin = () => {
  // 携带query参数
  router.push({ name: 'home', query: { a: 1 } })
}
import { ref, reactive, onMounted } from 'vue'
import { loginApi } from '@/api/user'
import logo from '@/assets/img/logo.png'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import options from '@/config/particle'
import { message } from 'ant-design-vue'
import { loadSlim } from 'tsparticles-slim'
import { setStorage, getStorage, removeStorage } from '@/utils/storage'
import { useUserStore } from '@/store/user'
const router = useRouter()
const userSrore = useUserStore()
// 1. 加载粒子背景
const particlesInit = async (engine) => {
  //await loadFull(engine);
  await loadSlim(engine)
}

// 2.登录功能
let isSending = ref(false) // 发送ajax状态
let initForm = {
  username: '',
  password: '',
  remember: false
}
const result = getStorage('loginInfo')

result && Object.assign(initForm, result) //短路运算
const formState = reactive(initForm)
// 点击登录验证成功执行的函数
const onFinish = (values) => {
  // eslint-disable-next-line no-unused-vars
  const { password, remember, username } = values

  remember ? setStorage('loginInfo', values) : removeStorage('loginInfo')
  //2.1记住密码
  //2.2
  // 马上发送ajax了
  isSending.value = true
  // 发送ajax-请求登录接口
  loginApi(username, password)
    .then((res) => {
      console.log(res)
      //拿到token
      userSrore.updateToken(res.access_token)
      message.success('登录成功')
      isSending.value = false
      // 跳转到新的页面
      router.push('/home')
    })
    // eslint-disable-next-line no-unused-vars
    .catch((e) => {
      //捕获错误
      console.log(e)
      message.error('账号或者密码有错误，请重新输入')
      isSending.value = false
    })
}
// 点击按钮->rule验证失败
// eslint-disable-next-line no-unused-vars
const onFinishFailed = (errorInfo) => {
  message.error('验证失败！')
}

//自动获得焦点
const usernameIntance = ref(null)
//安装完
onMounted(() => {
  usernameIntance.value.focus()
})
//4.大小写
const isShowCaps = ref(false)
const keydown = ({ key }) => {
  isShowCaps.value = key && key.length === 1 && key >= 'A' && key <= 'Z'
}
const blur = () => {
  isShowCaps.value = false
}
</script>
<style scoped lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  .login-modal {
    width: 500px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border: 1px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.8);
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .logo-header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      span {
        color: #fff;
        margin-left: 10px;
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
}
:where(.css-dev-only-do-not-override-19iuou).ant-input-affix-wrapper {
  background-color: transparent;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-input) {
  background-color: transparent;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-input::placeholder) {
  color: #fff;
}
.ant-input-prefix span {
  color: #fff !important;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-input-affix-wrapper > input.ant-input) {
  color: #fff;
}
</style>
